import { useEffect, useState } from 'react'
import { fetchData } from '../helper'
import { List } from '../List'

function Demo () {
  const [data, setData] = useState([])

  const initialData = async () => {
    try {
      setData(
        await fetchData('people')
      )
    }
    catch(err) {
      console.error(err)
    }
  }

  useEffect(() => {
    initialData()
  }, [])

  return (
    <List items={data} />
  )
}

export default {
  Component: Demo,
  route: 'fetch',
  order: 1,
}
